import { Component, Input, OnInit, Output, EventEmitter, AfterContentChecked, AfterContentInit, OnChanges } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { DeviceSelectModal } from '@modals/device-select/device-select';

@Component({
  selector: 'select-option',
  templateUrl: './select-option.html',
  styleUrls: ['select-option.scss']
})
export class SelectOptionComponent implements OnInit, AfterContentChecked {
  @Input() options;
  @Input() saved;
  selected = null;
  @Output() selectedName: EventEmitter<any> = new EventEmitter();
  @Output() selectedObj: EventEmitter<any> = new EventEmitter();
  constructor(public modalCtrl: ModalController) {
  }

  // 初始化默认选择项
  ngOnInit() {
  }

  ngAfterContentChecked() {
    if (this.options.dataValueList.length > 0) {
      this.selected = this.selected ? this.selected : this.options.defaultOps;
    }
    if (this.saved) {
      this.selected = this.saved ? this.saved : this.selected;
    }
  }
  // 打开模态框
  async openSelect() {
    const data = {
      title: '请选择' + this.options.title,
      device: this.options.dataValueList,
      select: this.selected ? this.selected.id : null
    };
    const modal = await this.modalCtrl.create(
      {
        component: DeviceSelectModal,
        componentProps: data
      }); // 创建新的页面——UserInfoModalPage
    modal.present(); // 页面展示
    const datas = await modal.onDidDismiss();
    if (datas.data) {
      this.selected = datas.data;
      this.selectedObj.emit(datas.data);
    }
  }
}
